Gem@ BLOG

Categorías en forma de pestañas en plantilla Rounders

Vamos a instalar unas categorías en forma de pestaña para la plantilla Rounders
Una vez tengamos los post etiquetados nos dirigimos a:
Plantilla/Edicion de Html/Expandir plantillas de artilugios.

Buscamos esta línea de código:

<b:section class='header' id='header' maxwidgets='1'>

Y la sustituimos por lo siguiente:

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Luego buscamos: ]]></b:skin> y justo antes añadiremos este código:

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
#tabsC a span {
float:none;
}
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<div id='tabsC'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

Y reemplazaremos la anterior de color azul por el siguiente código rojo:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

No olvides que Blogger nos proporciona Drag ‘n drop se denomina así a la acción de arrastrar y soltar con el ratón cualquier elemento de un lugar a otro, por lo tanto si ves tus etiquetas en un lugar que no es el deseado debes arrastrarlas hasta situarlas donde deseas que aparezcan en el blog.

"Guarda las imágenes en tu PC , si algún día el servidor de las imágenes deja de funcionar"